import React, { forwardRef, useEffect, useState } from 'react';
import { Modal, ModalFuncProps, message } from 'antd';
import { getMessage } from '@inbiz/react';
import { InbizIcon } from '@inbiz/utils';
import screenfull from 'screenfull';
import './style.less';

const ShareModal: React.ForwardRefRenderFunction<
  any,
  {
    url: string;
    version: string;
    doneHandler: Function;
    unmount: Function;
    modalParams: ModalFuncProps;
    bodyHeight?: any;
  }
> = (props, ref) => {
  const { url, modalParams, version, doneHandler, bodyHeight, unmount } = props;
  const [isFullscreen, setIsFullscreen] = useState(false);

  const getFullScreenElement = () => {
    let managerModal = document.getElementsByClassName(
      'processCenter-easy-item-process-detail-modal',
    )[0];
    let fullScreenElement = managerModal?.getElementsByClassName('ant-modal-content')[0];
    return fullScreenElement;
  };

  const fullScreenHandleClick = () => {
    if (!screenfull.isEnabled) {
      message.warning(getMessage('processCenter.cantFullScreen'));
      return false;
    }
    screenfull.toggle(getFullScreenElement());
    setIsFullscreen(!isFullscreen);
    return;
  };

  useEffect(() => {
    if (version == 'v5') {
      let timer = setInterval(() => {
        let iframeWindow = document.getElementById(url)?.contentWindow;
        if (iframeWindow?.eform?.formEngine?.isLoaded) {
          clearInterval(timer);
          let controlWrapper = iframeWindow?.document.getElementsByClassName(
            'edoc2WorkFlowButtonContainer',
          )[0];
          let controlId = controlWrapper?.getAttribute('controlid');
          iframeWindow
            ?.eform(controlId)
            ?.method('afterSubmit', function (param: { result: boolean }) {
              if (param.result === true) {
                unmount && unmount();
                message.success({ content: getMessage('processCenter.operateSuccess'), key: 'process-easy-view-window-approval-success' });
                doneHandler && doneHandler();
              }
            });
        }
      }, 100);
    } else {
      let timer = setInterval(() => {
        let iframeWindow = document.getElementById(url)?.contentWindow;
        if (iframeWindow?.inbiz) {
          clearInterval(timer);
          iframeWindow?.inbiz?.on('saveData', function (res: any) {
            if (res) {
              let timer1 = setInterval(() => {
                let ifSuccess = localStorage.getItem('process-easy-view-approval-success');
                if (ifSuccess == 'true') {
                  clearInterval(timer1);
                  unmount && unmount();
                  message.success({ content: getMessage('processCenter.operateSuccess'), key: 'process-easy-view-window-approval-success' });
                  doneHandler && doneHandler();
                }
              }, 100);
            }
          });
        }
      }, 100);
    }
  }, [version, url]);

  return (
    <Modal
      {...modalParams}
      bodyStyle={{
        height: bodyHeight ? bodyHeight - 40 : 660,
        padding: 0,
      }}
    >
      <>
        <iframe
          id={url}
          style={{
            height: bodyHeight ? bodyHeight - 40 + 'px' : '660px',
            width: '100%',
            border: 'none',
            overflow: 'auto',
            borderRadius: 8,
          }}
          src={url}
        />
        <div className="processCenter-easy-item-process-detail-modal-fullscreen">
          <InbizIcon
            type={isFullscreen ? 'icon-huanyuan' : 'icon-ic-zuidahua'}
            onClick={fullScreenHandleClick}
            style={{ width: 20, height: 20 }}
          />
        </div>
      </>
    </Modal>
  );
};

export default forwardRef(ShareModal);
